<template>
  <div>
    <TopNav2 title="最热商品"/>
    <div class="main">
      <router-link to="/find">
        <img  class="top-pic" :src="imgUrl" alt="">
      </router-link>
      <router-link to="/">
        <Product :productList="productList"/>
      </router-link>
      <RankingList />
    </div>
    
  </div>
</template>

<script>
import TopNav2 from "../components/TopNav2"
import Product from '../components/HotProduct/Product.vue'
import RankingList from '../components/HotProduct/RankingList.vue'
export default {
  name:"HotProduct",
  data(){
    return{
      imgUrl: require("../assets/hot-product/hot-product_01.png"),
      productList:[]
    }
 
  },
  mounted() {
    this.$axios.get("http://localhost:3000/api/hotTopic?count=2",{
      
    })
    .then(res => {
      console.log(res.data);
      this.productList = res.data;
      
    })
    .catch(error => {
      console.log(error);
    })
  },
  components:{
    TopNav2,
    Product,
    RankingList
  }
}
</script>

<style scoped>
  .main{
    position: absolute;
    left: 0;
    top: 2.267rem;
  }
  .top-pic{
    width: 9.466rem;
    height: 4rem;
    border-radius: 0.134rem;
    margin-left: 0.267rem;
    box-shadow: 0.053rem -0.267rem 1.067rem rgba(0,0,0,0.2);
    margin-bottom: 0.25rem;
  }
  
</style>
